<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body {
				background-color: #dcdcdc;
			}
			.box {
				position: fixed;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
			.box li {
				margin: 2px;
				transform: translateX(150px);
				transition: all 1s;
			}
			.box:hover li {
				transform: translateX(0);
			}
			.box li:hover span:first-child {
				background-color: #05b700;
			}
			.box li:hover span:last-child {
				color: #69a5c5;
			}
			.box a {
				display: block;
				text-decoration: none;
				height: 36px;
				line-height: 36px;
			}
			.box a span:first-child {
				width: 36px;
				text-align: center;
				background-color: #1a74a2;
				display: inline-block;
				color: #FFFFFF;
			}
			.box a span:last-child {
				background-color: #FFFFFF;
				display: inline-block;
				padding-left: 10px;
				width: 140px;
			}
			.box li:nth-child(1) {
				transition-delay: 0.1s;
			}
			.box li:nth-child(2) {
				transition-delay: 0.2s;
			}
			.box li:nth-child(3) {
				transition-delay: 0.3s;
			}
			.box li:nth-child(4) {
				transition-delay: 0.4s;
			}
			.box li:nth-child(5) {
				transition-delay: 0.5s;
			}
			.box li:nth-child(6) {
				transition-delay: 0.6s;
			}
			.box li:nth-child(7) {
				transition-delay: 0.7s;
			}
			.box li:nth-child(8) {
				transition-delay: 0.8s;
			}
			.box li:nth-child(9) {
				transition-delay: 0.9s;
			}
			.box li:nth-child(10) {
				transition-delay: 1.0s;
			}
			.box li:nth-child(11) {
				transition-delay: 1.1s;
			}
			.box li:nth-child(12) {
				transition-delay: 1.2s;
			}
		</style>
	</head>
	<body>
		<ul class="box">
			<li>
				<a href="#">
					<span>0</span><span>站长素材</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>1</span><span>书签切换</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>2</span><span>幻灯片</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>3</span><span>图片滚动-左</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>4</span><span>图片滚动-右</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>5</span><span>图片无缝滚动-右</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>6</span><span>图片无缝滚动-右</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>7</span><span>文字滚动-左</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>8</span><span>文字滚动-右</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>9</span><span>文字无缝滚动-左</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>10</span><span>文字无缝滚动-右</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>11</span><span>其他基础效果</span>
				</a>
			</li>
		</ul>
	</body>
</html>
